<?php
if(isset($_GET['send_mail'])){  //是否有send_mail参数   http://www.baidu.com/?send_mail
    $code=rand(1000,9999);      //随机生成 1000 ~ 9999 之间苏技术
    setcookie('valid_mail_code',$code);   //设置cookie
//smtp  mail
        mail($_GET['email'], '验证码', $code);   //mail  如果服務器做過配置    smtp  phpmail
        exit;                                              //退出
}
if(isset($_GET['email_valid'])){  //是否有email_valid参数   http://www.baidu.com/?email_valid&code=5303
    if($_COOKIE['valid_mail_code']==$_GET['code']){   //如果  校驗碼與 get  code值相等 那麽就認爲正確
        echo 0;
        }else{
        echo 1;
    }
exit;
}
?>

<input name="email" id="email"/>
<button id="send">发送验证码</button>

<input name="email_valid" id="email_valid"/>
<script>

    var send=document.getElementById('send');
    send.addEventListener('click',function(){   //綁定事件
        send.setAttribute('disabled','disabled')   //禁用  button

        var data=email.value;    //获取对应的值

        var ajax=new XMLHttpRequest();                    //ajax  4步曲
        ajax.open('get','?send_mail&email='+data,true);  //  <当前url>?send_mail&email=nddnvjfd@163.ccom
        ajax.send();                                        //发送请求  w3school ajax 实例

        var time=3;                                          //倒计时时间
        var t=setInterval(function(){                        // 每隔多少秒计时
            time--;                                 //减1
            if(time==0){                          //倒计时结束
                clearInterval(t);                      //关闭倒计时功能
                send.innerHTML='发送验证码'              //改变文字内容
                send.removeAttribute('disabled')            //去除禁用属性
                return;                                 //需要返回  如果不返回那么执行后续语句
            }
            send.innerHTML='验证码再'+time+'后过期'    //设置剩余时间
        },1000)
    });

    email_valid.addEventListener('blur',function(){
        var ajax=new XMLHttpRequest();    //ajax 4步曲
        ajax.open('get','?email_valid&code='+email_valid.value,true);
        ajax.send();
        ajax.onreadystatechange=function () {
            console.info(ajax);
            console.info( ajax.readyState);
            console.info( ajax.status);
//            console.info( ajax.readyState==200 && ajax.status==4);
            if(ajax.readyState==4 && ajax.status==200){   //获取状态   判断状态
                var data=ajax.responseText;
//                alert(data);
               if(data==0){
                   alert('success');
               }else{
                   alert('error');
               }
            }

        };

    })
</script>